<!-- col-适配search -->
<template>
	<div class="search hr-flex-start">
		<el-form ref="queryForm" :inline="true">
			<!-- <el-select placeholder="类型" clearable>
								<el-option label="目录" :value="1" />
								<el-option label="菜单" :value="2" />
								<el-option label="按钮" :value="3" />
							</el-select> -->
			<el-row style="width: 100%; height: 100%">
				<template v-for="(item, index) in propList" :key="index">
					<el-col :xs="item?.size?.xs || 12" :sm="item?.size?.sm || 8" :md="item?.size?.md || 8" :lg="item?.size?.md || 5" :xl="item?.size?.xl || 5">
						<el-form-item :label="item.label">
							<template v-if="item.type == 'input'">
								<el-input v-model="searchObj[item.prop]" v-bind="item.inputStye" />
							</template>
							<template v-if="item.type == 'select'">
								<!-- <el-input :placeholder="item.placeholder" v-model="searchObj[item.prop]" /> -->
								<el-select :placeholder="item.placeholder" v-model="searchObj[item.prop]">
									<el-option v-for="(itemOption, index) in item.selectOptions" :key="index" v-bind="itemOption" />
								</el-select>
							</template>
						</el-form-item>
					</el-col>
				</template>

				<el-form-item>
					<!-- 插槽需要放到el-form-item 屏幕尺寸变化时,位置才能正确展示!! -->
					<slot name="footer">
						<el-button icon="ele-Refresh" @click="resteAction" :class="{ hidden: showButtonType.indexOf('reset') == -1 }" :size="size"> {{ $t('nPhtThUn4LrVtwBcSaYw') }} </el-button>
						<el-button type="primary" icon="ele-Search" @click="query" :class="{ hidden: showButtonType.indexOf('query') == -1 }" :size="size"> {{ $t('qEh3zD5bC8bZb4bLvFe29') }} </el-button>
						<el-button icon="ele-Plus" type="primary" @click="add" :class="{ hidden: showButtonType.indexOf('add') == -1 }" :size="size"> {{ $t('wnpevud10fwvwhDyynC4A') }} </el-button>
					</slot>
				</el-form-item>
			</el-row>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { defineProps, PropType, reactive } from 'vue';
import resetSearch from '/@/utils/hook/resetSearch';
//注意不要写ts文件后缀!!
import { IItemStyleType } from './type/index';

const props = defineProps({
	propList: {
		// type: Array as PropType<IItemStyleType[]>,
		type: Array as PropType<IItemStyleType[]>,
		required: true,
	},
	searchObj: {
		type: Object,
		required: true,
	},
	showButtonType: {
		type: Array,
		default: () => [],
	},
});
let searchObj = reactive(props.searchObj);
const emit = defineEmits(['queryAction', 'addAction']);

//查询事件
const query = () => {
	emit('queryAction', searchObj);
};
//新增事件
const add = () => {
	emit('addAction', searchObj);
};
//重置按钮
const resteAction = () => {
	searchObj = resetSearch(searchObj);
};
</script>

<!-- scoped属性使style有自己独立的作用域(属性选择器实现 title[data-v-xxx]) -->
<style scoped lang="scss">
.hidden {
	display: none;
}
</style>
